<template>
    <scroll-view
        :class="themeClass"
        scroll-y="true"
        style="top: 0; bottom: 0; left: 0; right: 0"
        class="bg-151518"
        v-show="loading"
        :style="'padding-bottom: calc(var(--window-bottom) + 150px);'"
    >
        <!-- #ifdef MP-WEIXIN -->
        <view style="top: 0px; width: 100%; z-index: 99999" :style="{ backgroundColor: bgC ? '#fff' : '#151518' }">
            <u-navbar :titleStyle="'{color: #ffffff}'" bgColor="#151518" :placeholder="true" :autoBack="true" leftIconSize="0" leftIconColor="#FFFFFF"></u-navbar>
        </view>
        <!-- #endif -->
        <view class="padding-0-30">
            <!-- #ifdef MP-WEIXIN -->
            <v-yindao></v-yindao>
            <!-- #endif -->
            <u-gap height="60rpx"></u-gap>
            <view class="menu-avatar radius shadow" :style="{ borderRadius: '16rpx', backgroundColor: bgC ? '#1778fd' : '#151518' }">
                <view class="cu-item flex flex-align-center" style="background: none; padding: 0 4rpx">
                    <!--   <view
            @tap="goToUrl('./setting')"
            v-if="user.heardimg == '' || user.heardimg == null"
            class="cu-avatar round xl"
            :style="{ backgroundImage: 'url(/static/default-avatar.png)' }"
          > -->
                    <view @tap="goToUrl('./setting')" v-if="user.heardimg == '' || user.heardimg == null" class="cu-avatar round xl">
                        <!-- <image style="width: 120rpx; height: 120rpx; border-radius: 50%" :src="userInfo ? userInfo.avatarUrl : '@/static/default-avatar.png'" mode=""></image> -->
                        <image style="width: 120rpx; height: 120rpx; border-radius: 50%" src="@/static/zsk.png" mode=""></image>
                    </view>
                    <view @tap="goToUrl('./setting')" v-else class="cu-avatar round xl" :style="'background-image:url(' + user.heardimg + ');'"></view>
                    <view class="contents">
                        <!-- <view class="font32 text-white" @tap="goToUrl('./setting')">{{ user.username == '' ? user.mobile : user.username }}</view> -->

                        <!-- <view class="font32 text-white" @tap="goToUrl('./setting')" v-if="userInfo != ''"> -->
                        <!-- {{ user.username || userInfo.nickName == '' ? user.mobile : userInfo.nickName ? userInfo.nickName : user.username }} -->
                        <!-- {{ user.username || userInfo.nickName == '' ? userInfo.nickName : user.mobile ? user.mobile : user.username }} -->
                        <!-- </view> -->
                        <view class="font32 text-white" @tap="goToUrl('./setting')" :style="{ color: bgC ? '#000' : '#ffefcd ' }">
                            <!-- {{ user.username || userInfo.nickName == '' ? user.mobile : userInfo.nickName ? userInfo.nickName : user.username }} -->
                            {{ user.username == '' ? user.mobile : user.username }}
                        </view>
                        <!-- ID:{{user.id}} -->
                        <u-gap height="16rpx"></u-gap>
                        <view class="text-gray text-sm flex">
                            <!-- <view class="text-gray text-sm flex" @tap="goToUrl('../assets/assets')"> -->
                            <view class="color-3D3D3D font24 level-bg" v-if="user.shiming == 0" @tap.stop="goToUrl('../userinfo/authlist')">未实名</view>
                            <view class="color-3D3D3D font24 level-bg" v-else @tap.stop="goToUrl('../userinfo/authlist')">已实名</view>
                            <!-- <view class="color-3D3D3D font24 level-bg" v-if="user.level == 0">初级会员</view>
              <view class="color-3D3D3D font24 level-bg" v-else-if="user.level == 1">中级会员</view>
              <view class="color-3D3D3D font24 level-bg" v-else-if="user.level == 2">高级会员</view>
              <view class="color-3D3D3D font24 level-bg" v-else-if="user.level == 3">尊贵会员</view> -->
                        </view>
                    </view>
                </view>
                <u-gap height="68rpx"></u-gap>
                <view class="cu-list border-radius-16" :style="{ padding: '26rpx 30rpx', backgroundColor: bgC ? '#1778fd' : '#272735' }">
                    <view class="cu-item flex flex-space-between" style="border-radius: 15rpx; flex-wrap: wrap">
                        <view class="content margin1" style="left: 30px; margin-bottom: 30rpx">
                            <view class="text-bold color-F3C685 font36 flex flex-align-center">¥{{ parseFloat(user.money).toFixed(2) }}</view>
                            <u-gap height="8rpx"></u-gap>
                            <view :style="{ color: bgC ? '#000' : '#ffefcd ' }" class="font26">账户余额(元)</view>
                        </view>
                        <view class="content margin1" style="left: 30px; margin-bottom: 30rpx">
                            <view class="text-bold color-F3C685 font36 flex flex-align-center">¥{{ parseFloat(user.no_clearing).toFixed(2) }}</view>
                            <u-gap height="8rpx"></u-gap>
                            <view :style="{ color: bgC ? '#000' : '#ffefcd ' }" class="font26">未结算(元)</view>
                        </view>
                        <view class="content margin1" style="left: 30px; margin-bottom: 30rpx">
                            <view class="text-bold color-F3C685 font36 flex flex-align-center">¥{{ parseFloat(user.can_clearing).toFixed(2) }}</view>
                            <u-gap height="8rpx"></u-gap>
                            <view :style="{ color: bgC ? '#000' : '#ffefcd ' }" class="font26">可结算(元)</view>
                        </view>
                        <view class="content" style="left: 30px; margin-bottom: 30rpx">
                            <view class="text-bold color-F3C685 font36 flex flex-align-center">¥{{ parseFloat(user.clearing).toFixed(2) }}</view>
                            <u-gap height="8rpx"></u-gap>
                            <view :style="{ color: bgC ? '#000' : '#ffefcd ' }" class="font26">已结算(元)</view>
                        </view>
                        <!--   <view class="action" style="width: 200rpx">
                            <view class="btn-draw flex flex-center" @click="goToUrl('../userinfo/Withdrawal')">提现</view>
                        </view> -->
                    </view>
                    <view class="action">
                        <view class="btn-draw flex flex-center action1" @click="forward = true">结算</view>
                        <view class="btn-draw flex flex-center" @click="goToUrl('../userinfo/Withdrawal')">提现</view>
                    </view>
                </view>
            </view>
            <u-gap height="24rpx"></u-gap>
            <view class="padding-32-30 bg-272735 border-radius-16 flex flex-space-between" :style="{ borderRadius: '16rpx', backgroundColor: bgC ? '#f7f7f7' : '#272735' }">
                <view @click="goToUrl('../my/statistics')" class="cu-item font28 flex flex-center flex-column">
                    <view class="">
                        <image style="width: 48rpx; height: 48rpx" src="https://uapi.zheshouka.com/static/uniapp/img/icon_person1.png" mode="scaleToFill"></image>
                    </view>
                    <u-gap height="8rpx"></u-gap>
                    <text :style="{ color: bgC ? '#000' : '#ffefcd ' }">我的统计</text>
                </view>
                <view class="cu-item font28 flex flex-center flex-column" @click="goToUrl('../order/order')">
                    <view class="">
                        <image style="width: 48rpx; height: 48rpx" src="https://uapi.zheshouka.com/static/uniapp/img/icon_person2.png" mode="scaleToFill"></image>
                    </view>
                    <u-gap height="8rpx"></u-gap>
                    <!-- <text style="color: #fcecc9">卖卡记录</text> -->
                    <text :style="{ color: bgC ? '#000' : '#ffefcd ' }">卖卡记录</text>
                </view>
                <view class="cu-item font28 flex flex-center flex-column" @click="goToUrl('../my/cash')">
                    <view class="">
                        <image style="width: 48rpx; height: 48rpx" src="https://uapi.zheshouka.com/static/uniapp/img/icon_person3.png" mode="scaleToFill"></image>
                    </view>
                    <u-gap height="8rpx"></u-gap>
                    <text :style="{ color: bgC ? '#000' : '#ffefcd ' }">提现记录</text>
                </view>
                <view class="cu-item font28 flex flex-center flex-column" @click="goToUrl('../my/moneylog')">
                    <view class="">
                        <image style="width: 48rpx; height: 48rpx" src="https://uapi.zheshouka.com/static/uniapp/img/icon_person4.png" mode="scaleToFill"></image>
                    </view>
                    <u-gap height="8rpx"></u-gap>
                    <text :style="{ color: bgC ? '#000' : '#ffefcd ' }">资金明细</text>
                </view>
            </view>
            <u-gap height="20rpx"></u-gap>
            <view class="menu bg-272735 border-radius-16 font30" :style="{ borderRadius: '16rpx', backgroundColor: bgC ? '#f7f7f7' : '#272735' }">
                <view class="navite-item arrow" @tap="goToUrl('./sign')">
                    <view :style="{ color: bgC ? '#000' : '#ffefcd ' }" class="content text-blue">
                        <image style="width: 40rpx; height: 40rpx; margin-right: 26rpx" src="@/static/icon_sign.png" mode="scaleToFill"></image>
                        <text class="font28">电子签状态</text>
                    </view>
                    <view class="flex">
                        <view v-if="!user.dianziqian" class="flex">
                            <text :style="{ color: bgC ? '#000' : '#ffefcd ' }">未签</text>
                            <u-icon name="arrow-right" color="#69698C"></u-icon>
                        </view>
                        <text v-else>已签</text>
                    </view>
                </view>
                <view class="navite-item arrow" @tap="goToUrl('./setting')">
                    <view :style="{ color: bgC ? '#000' : '#ffefcd ' }" class="content text-blue">
                        <image style="width: 40rpx; height: 40rpx; margin-right: 26rpx" :src="httpurl + '/static/uniapp/img/navite1.png'" mode="scaleToFill"></image>
                        <text class="font28">个人资料</text>
                    </view>
                    <u-icon name="arrow-right" color="#69698C"></u-icon>
                </view>
                <view class="navite-item arrow" @tap="goToUrl('../../subpkg_test/contact')">
                    <view :style="{ color: bgC ? '#000' : '#ffefcd ' }" class="content text-green">
                        <image style="width: 40rpx; height: 40rpx; margin-right: 26rpx" :src="httpurl + '/static/uniapp/img/navite3.png'" mode="scaleToFill"></image>
                        <text class="font28">在线客服</text>
                    </view>
                    <u-icon name="arrow-right" color="#69698C"></u-icon>
                </view>
                <view class="navite-item arrow" @tap="goToUrl('../../subpkg_test/feedback')">
                    <view :style="{ color: bgC ? '#000' : '#ffefcd ' }" class="content text-orange">
                        <image style="width: 40rpx; height: 40rpx; margin-right: 26rpx" :src="httpurl + '/static/uniapp/img/navite4.png'" mode="scaleToFill"></image>
                        <text class="font28">建议反馈</text>
                    </view>
                    <u-icon name="arrow-right" color="#69698C"></u-icon>
                </view>
                <!-- <view class="navite-item arrow" style="border: none" @tap="goToUrl('../business/business')"> -->
                <view class="navite-item arrow" @tap="goToUrl('../../subpkg_test/business')">
                    <view :style="{ color: bgC ? '#000' : '#ffefcd ' }" class="content text-pink">
                        <image style="width: 40rpx; height: 40rpx; margin-right: 26rpx" :src="httpurl + '/static/uniapp/img/navite5.png'" mode="scaleToFill"></image>
                        <text class="font28">商务合作</text>
                    </view>
                    <u-icon name="arrow-right" color="#69698C"></u-icon>
                </view>
                <view class="navite-item arrow" @click="huislc">
                    <view :style="{ color: bgC ? '#000' : '#ffefcd ' }" class="content text-orange">
                        <image style="width: 40rpx; height: 40rpx; margin-right: 26rpx" :src="httpurl + '/static/uniapp/img/navite4.png'" mode="scaleToFill"></image>
                        <text class="font28">回收流程</text>
                    </view>
                    <u-icon name="arrow-right" color="#69698C"></u-icon>
                </view>
                <view class="navite-item arrow" @click="xieyi">
                    <view :style="{ color: bgC ? '#000' : '#ffefcd ' }" class="content text-orange">
                        <image style="width: 40rpx; height: 40rpx; margin-right: 26rpx" :src="httpurl + '/static/uniapp/img/navite4.png'" mode="scaleToFill"></image>
                        <text class="font28">用户协议</text>
                    </view>
                    <u-icon name="arrow-right" color="#69698C"></u-icon>
                </view>
                <view class="navite-item arrow" @click="qyzz">
                    <view :style="{ color: bgC ? '#000' : '#ffefcd ' }" class="content text-orange">
                        <image style="width: 40rpx; height: 40rpx; margin-right: 26rpx" :src="httpurl + '/static/uniapp/img/navite4.png'" mode="scaleToFill"></image>
                        <text class="font28">企业资质</text>
                    </view>
                    <u-icon name="arrow-right" color="#69698C"></u-icon>
                </view>
                <view class="navite-item arrow" style="border: none" @click="zhaoshang">
                    <view :style="{ color: bgC ? '#000' : '#ffefcd ' }" class="content text-orange">
                        <image style="width: 40rpx; height: 40rpx; margin-right: 26rpx" :src="httpurl + '/static/uniapp/img/navite4.png'" mode="scaleToFill"></image>
                        <text class="font28">招商</text>
                    </view>
                    <u-icon name="arrow-right" color="#69698C"></u-icon>
                </view>
                <!-- #ifndef H5 -->
                <view class="navite-item arrow" style="border: none" @click="fenxiang" v-if="yaostate != 'off'">
                    <view :style="{ color: bgC ? '#000' : '#ffefcd ' }" class="content text-orange">
                        <image style="width: 40rpx; height: 40rpx; margin-right: 26rpx" :src="httpurl + '/static/uniapp/img/navite4.png'" mode="scaleToFill"></image>
                        <text class="font28">分享有礼</text>
                    </view>
                    <u-icon name="arrow-right" color="#69698C"></u-icon>
                </view>
                <!-- #endif -->
            </view>
            <!-- #ifndef APP -->
            <u-gap height="140rpx"></u-gap>
            <!-- #endif -->
        </view>
        <!-- #ifndef APP -->
        <u-gap height="160rpx"></u-gap>
        <!-- #endif -->
        <v-popup @update:isShow="isShow = $event" :isShow="isShow"></v-popup>
        <!-- <v-footer tab="my" class="buttonmenu"></v-footer> -->
        <v-footer :tab="'my'" :bgColor="bgC" class="buttonmenu"></v-footer>
        <!-- <v-kefu @tap="tokefu()"></v-kefu> -->
        <!-- #ifdef MP-WEIXIN -->
        <v-kefu @tap="tokefu()"></v-kefu>
        <!-- #endif -->
        <!-- #ifndef MP-WEIXIN -->
        <view @click="tokefu()" class="">
            <v-kefu></v-kefu>
        </view>
        <!-- #endif -->
        <u-popup :show="forward" :round="10" mode="center" @close="forward = false">
            <view class="layers">
                <text class="w">当前可结算金额 {{ parseFloat(user.can_clearing).toFixed(2) }}元，是否结算？</text>
                <view class="di">
                    <text class="q" @click="forward = false">取消</text>
                    <text class="g" @click="forward1">确认</text>
                </view>
            </view>
        </u-popup>
    </scroll-view>
</template>

<script>
import footer from '@/components/footer.vue';
import kefu from '@/components/kefu.vue';
import popup from '@/components/popup.vue';
import yindao from '@/components/yindao.vue';
export default {
    options: { styleIsolation: 'shared' },
    components: { 'v-footer': footer, 'v-kefu': kefu, 'v-popup': popup, 'v-yindao': yindao },
    data() {
        return {
            money: 0,
            uid: 12,
            busisse: '其他',
            username: '52',
            telphone: '',
            user: [],
            barHeight: 0,
            loading: false,
            qqh: null,
            showWallet: false,
            yaostate: '', //分享显示隐藏
            isWeChatAudit: null, //隐藏按钮
            userInfo: {}, //微信信息
            recycle: '', //回收流程
            protocol: '', //用户协议
            company: '', // 企业资质
            isShow: 0, //控制客服弹出层
            currentTheme: '', //背景色
            bgC: false,
            httpurl: '', //图片链接
            forward: false, //结算金额确认弹窗
            can_clearing: null //可结算金额
        };
    },
    onLoad() {
        this.currentTheme = this.getTheme();
        this.isShow = false;
        this.getSetuser();
        uni.showLoading({
            title: '加载中'
        });
        this.barHeight = uni.getSystemInfoSync().statusBarHeight;
        this.getInitData();
    },
    onShow() {
        var that = this;
        console.log(444, that.app.id);
        console.log(555, that.app.assets);
        this.bgC = that.app.background;
        this.currentTheme = this.getTheme();
        // this.getSetuser();
        uni.hideTabBar();
        this.getUsets();
        this.httpurl = this.app.httpUrl;
        if (this.app.getAuthCode()) {
            this.getConfig();
        }
    },
    // 计算属性返回css样式
    computed: {
        themeClass() {
            return `theme-${this.currentTheme}`;
        }
    },
    methods: {
        // 结算可结算金额
        forward1() {
            console.log(this.can_clearing);
            if (this.can_clearing <= 0) return this.app.showMsg('当前可结算金额不能小于0！');
            uni.request({
                url: this.app.apiHost + '/clearing',
                method: 'POST',
                header: { Authorization: 'bearer ' + this.app.getAuthCode() },
                success: (res) => {
                    if (res.data.code == 0) {
                        this.app.showMsg('结算成功！');
                        this.getUsets(); //刷新金额信息
                    } else {
                        this.app.showMsg('结算失败！');
                    }
                    this.forward = false;
                }
            });
        },
        // 获取本地样式
        getTheme() {
            return uni.getStorageSync('theme') || 'dark';
        },
        tokefu() {
            this.isShow = !this.isShow;
        },
        // 回收流程
        huislc() {
            uni.navigateTo({
                url: `/subpkg_test/huishou?data=${this.recycle}`
            });
        },
        // 招商
        zhaoshang() {
            uni.navigateTo({
                url: '/subpkg_test/attract'
            });
        },
        // 用户协议
        xieyi() {
            // uni.navigateTo({
            //   url: `/subpkg_test/xieyi?data=${this.protocol}`
            // });
            uni.navigateTo({
                url: '/pages/index/agree?id=18'
            });
        },
        // 企业资质】
        qyzz() {
            uni.navigateTo({
                url: `/subpkg_test/zizhi?data=${this.company}`
            });
        },
        // 分享有礼
        fenxiang() {
            uni.navigateTo({
                url: '/subpkg_test/fenxiang'
            });
        },
        getSetuser() {
            let storedUserInfo = uni.getStorageSync('userInfo');
            if (storedUserInfo) {
                // 如果存储中有用户信息，则赋值给data中的userInfo
                this.userInfo = storedUserInfo;
            } else {
                // 如果没有存储用户信息，可以进行相应的处理，比如显示一个提示或初始化一个默认用户
                console.log('没有存储的用户信息');
            }
        },
        getInitData() {
            var that = this;
            uni.request({
                url: that.app.apiHost + '/init',
                method: 'get',
                header: { Authorization: '' },
                success: (data) => {
                    this.isWeChatAudit = data.data.data.isWeChatAudit;
                    console.log(this.isWeChatAudit);
                    console.log(23131, data.data.data);
                    this.recycle = data.data.data.recycle_protocol;
                    this.protocol = data.data.data.user_protocol;
                    this.company = data.data.data.company_qualify;
                    this.yaostate = data.data.data.yaostate;
                }
            });
        },
        getConfig() {
            uni.request({
                url: this.app.apiHost + '/cashindex',
                method: 'POST',
                header: { Authorization: 'bearer ' + this.app.getAuthCode() },
                success: (res) => {
                    if (res.data.code == 0) {
                        this.showWallet = res.data.data.config.length > 0;
                    }
                }
            });
        },
        qq() {
            // #ifdef APP
            plus.runtime.openURL('mqqwpa://im/chat?chat_type=wpa&uin=' + this.qqh + '&version=1&src_type=web&web_src=oicqzone.com');
            // #endif

            // #ifdef H5
            window.location.href = 'http://wpa.qq.com/msgrd?v=3&uin=' + this.qqh + '&site=qq&menu=yes';
            // #endif
            // #ifdef MP-WEIXIN
            uni.navigateTo({
                url: '/pages/common/webView?url=' + 'https://tb.53kf.com/code/client/6cc83c5322375084d7ce617c094303f52/1'
            });
            // #endif
        },
        tophone: function () {
            //window.location.href ="tel:"+this.tel;
            uni.makePhoneCall({
                // 手机号
                phoneNumber: this.telphone,
                // 成功回调
                success: (res) => {
                    console.log('调用成功!');
                },
                // 失败回调
                fail: (res) => {
                    console.log('调用失败!');
                }
            });
        },
        getUsets() {
            var that = this;
            uni.request({
                url: that.app.apiHost + '/mindex',
                method: 'POST',
                header: { Authorization: 'bearer ' + that.app.getAuthCode() },
                success: (res) => {
                    console.log(res.data);
                    if (res.data.code == -1) {
                        that.app.showMsg('请登陆后再操作!', '../login/login');
                    }
                    if (res.data.code == 0) {
                        uni.setStorageSync('users', JSON.stringify(res.data.data));
                        that.user = res.data.data;
                        that.qqh = res.data.data.qqkefu;
                        that.app.id = res.data.data.id;
                        that.app.assets = res.data.data.id;
                        that.can_clearing = res.data.data.can_clearing;
                        uni.hideLoading();
                        that.loading = true;
                    }
                },
                fail(res) {
                    console.log(res);
                }
            });
        },
        goToUrl(u) {
            if (u.indexOf('sign') >= 0) {
                if (this.user.dianziqian == 1) return this.app.showMsg('已完成电子签');
                console.log(this.user['userReal']);
                if (this.user['userReal'] == null) {
                    return this.app.showMsg('请先完成实名认证');
                }
            }
            if (u.indexOf('order/order') >= 0) {
                uni.switchTab({
                    url: u
                });
            } else {
                uni.navigateTo({
                    url: u
                });
            }
        }
    }
};
</script>

<style lang="scss">
// 分享给普通朋友
.layers {
    .di {
        .q {
            width: 259.62rpx;
            height: 88rpx;
            line-height: 88rpx;
            font-size: 23.08rpx;
            text-align: center;
            color: #000;
            border-right: 1rpx solid #d8d8d8;
        }
        .g {
            width: 259.62rpx;
            height: 88rpx;
            line-height: 88rpx;
            border-radius: 0 0 19rpx 0;
            font-size: 23.08rpx;
            color: #000;
            text-align: center;
        }
        border-top: 1rpx solid #d8d8d8;
        display: flex;
        margin-top: 30rpx;
    }
    .w {
        width: 460rpx;
        line-height: 48rpx;
        display: flex;
        flex-wrap: wrap;
        padding: 0 30rpx;
        color: #333333;
        font-size: 30.77rpx;
        text-align: left;
    }
    background: #ffffff;
    border-radius: 19rpx;
    padding-top: 46.15rpx;
    text-align: center;
}

/* 定义主题样式 */
.theme-dark {
    background-color: #151518;
    // color: #fff !important;
    color: #ffefcd !important;
}

.theme-light {
    background-color: #fff;
    color: #000;
}
.menu {
    padding: 2rpx 30rpx;
    .navite-item {
        font-size: 28rpx;
        padding: 34rpx 0;
        display: flex;
        justify-content: space-between;
        text {
            // color: #b8b8d1;
        }
        .content {
            display: flex;
            align-items: center;
        }
        // border-bottom: 2rpx solid #383843;
    }
}
.btn-draw {
    width: 176rpx;
    height: 64rpx;
    background: linear-gradient(1deg, #f6c478 0%, #f8db9d 100%);
    border-radius: 200rpx 200rpx 200rpx 200rpx;
    opacity: 1;
}
.cu-avatar {
    width: 108rpx;
    height: 108rpx;
    margin-right: 20rpx;
    border: 6rpx solid #fff;
}
.toubg {
    // background-image: url('/static/586.png');
    background-repeat: no-repeat;
    background-size: 100%;
}

.cu-list.menu-avatar > .cu-item .contents {
    width: calc(100% - 80upx - 120upx);
    line-height: 1.6em;
}

.cu-list.menu > .cu-item .content {
    font-size: 34rpx;
}
.chuji {
    padding: 2rpx 30rpx;
}

.rights {
    position: absolute;
    top: 1px;
    right: 0px;
    border-radius: 25rpx;
    padding: 8rpx 30rpx;
}
.yuan {
    border-radius: 60rpx;
    height: 100rpx;
    width: 100rpx;
    line-height: 100rpx;
    font-size: 60rpx;
    color: #fff;
    margin: auto;
}
.level-bg {
    padding: 0 14rpx;
    height: 36rpx;
    background: linear-gradient(90deg, #f0c68a 17%, #f3c685 88%);
    border-radius: 200rpx 200rpx 200rpx 200rpx;
    opacity: 1;
    margin-right: 14rpx;
}
.action {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.action1 {
    margin-right: 30rpx;
}
.margin1 {
    margin-right: 20rpx;
}
</style>
